<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="./css/base.css" />
    <link rel="stylesheet" href="./css/commom.css" />
    <link rel="stylesheet" href="./css/index.css" />
    <link rel="stylesheet" href="./swiper/swiper.css" />
    <script src="./swiper/swiper.min.js"></script>
  </head>

  <body>
    <!-- 头部 -->
    <div class="header">
      <!-- top -->
      <div class="Top padding">
        <div class="top">
          <div class="icon">
            <img src="./img/01.png" alt="" />
          </div>
          <div class="search">
            <input type="text" placeholder="爱奇艺最新电视剧" />
          </div>
          <div class="icon">
            <img src="./img/02.png" alt="" />
          </div>
        </div>
      </div>
    </div>
    <!-- 轮播图 -->
    <div class="Banner padding">
      <div class="banner">
        <div class="swiper mySwiper">
          <div class="swiper-wrapper">
            <div class="swiper-slide">
              <img
                src="https://img2.baidu.com/it/u=2744615233,4059828078&fm=253&fmt=auto&app=138&f=JPEG?w=658&h=308"
                alt=""
              />
            </div>
            <div class="swiper-slide">
              <img
                src="https://img0.baidu.com/it/u=541788811,1012310917&fm=253&fmt=auto&app=138&f=PNG?w=1600&h=500"
                alt=""
              />
            </div>
            <div class="swiper-slide">
              <img
                src="https://img2.baidu.com/it/u=1010461935,4136293951&fm=253&fmt=auto&app=138&f=JPEG?w=1024&h=272"
                alt=""
              />
            </div>
          </div>
          <div class="swiper-pagination"></div>
        </div>
      </div>
      <script>
        var swiper = new Swiper('.mySwiper', {
          spaceBetween: 30,
          centeredSlides: true,
          autoplay: {
            delay: 2000,
            disableOnInteraction: false
          },
          pagination: {
            el: '.swiper-pagination',
            clickable: true
          }
        })
      </script>
    </div>
    <!-- 导航栏 -->
    <div class="nav padding">
      <div class="nav_item">
        <ul class="data"></ul>
      </div>
    </div>
    <!-- 商品 -->
    <div class="goods padding">
      <!-- 限时补贴 -->
      <div class="goods_item">
        <div class="ht">
          <div class="title">限时补贴</div>
          <!-- 计算时间 -->
          <div class="time">
            <dl>12</dl>

            <dl>17</dl>

            <dl>06</dl>
          </div>
        </div>
        <div class="hb">
          <img src="./img/15.png" alt="" />
          <div class="miaosha">秒杀价￥<span>26.6</span></div>
          <div class="zj">直降￥93.2</div>
        </div>
      </div>
      <!-- 每日好货 -->
      <div class="goods_item">
        <div class="ht">
          <div class="title">每日好货</div>
        </div>
        <div class="hb">
          <img src="./img/16.png" alt="" />
          <div class="miaosha">秒杀价￥<span>13.2</span></div>
          <div class="zj">直降￥33.6</div>
        </div>
      </div>
    </div>
    <!-- 商品列表 -->
    <div class="Goods padding">
      <div class="goodsList">
        <ul class="tabBox">
          <li class="active">
            <div class="a1">精选推荐</div>
            <div class="a2">月销爆品</div>
          </li>
          <li>
            <div class="a1">限时9块9</div>
            <div class="a2">好货推荐</div>
          </li>
          <li>
            <div class="a1">网红零食</div>
            <div class="a2">囤货必备</div>
          </li>
          <li>
            <div class="a1">人气景点</div>
            <div class="a2">打卡热榜</div>
          </li>
        </ul>
        <div class="tabBox_item">
          <ul class="goodsList_item">
            <li>
              <div class="img">
                <img
                  src="https://imgservice.suning.cn/uimg1/b2c/image/BmqcHgBxc0026QLC-2qeqw.jpg_200w_200h_4e"
                  alt=""
                />
              </div>
              <div class="title">百邻台布1.4*1.8m*20张(白色)</div>

              <div class="price">
                <span class="color">￥9.9</span>
                <span>月销2.0万</span>
              </div>
              <div class="platform">天猫</div>
            </li>
            <li>
              <div class="img">
                <img
                  src="https://imgservice.suning.cn/uimg1/b2c/image/kts0vRKDjseXadtMo7G-Sw.jpg_200w_200h_4e"
                  alt=""
                />
              </div>
              <div class="title">鲁花 5S压榨一级花生油5.436L食用油...</div>

              <div class="price">
                <span class="color">￥9.9</span>
                <span>月销2.0万</span>
              </div>
              <div class="platform">天猫</div>
            </li>
            <li>
              <div class="img">
                <img
                  src="https://imgservice.suning.cn/uimg1/b2c/image/kF3Zim3qr9eovodgzvIsqg.jpg_200w_200h_4e"
                  alt=""
                />
              </div>
              <div class="title">米线方便面广西特产酸辣米粉</div>

              <div class="price">
                <span class="color">￥9.9</span>
                <span>月销2.0万</span>
              </div>
              <div class="platform">天猫</div>
            </li>
            <li>
              <div class="img">
                <img
                  src="https://imgservice.suning.cn/uimg1/b2c/image/q_cTZ0qIJYB4Lp4tgTnRSQ.jpg_200w_200h_4e"
                  alt=""
                />
              </div>
              <div class="title">百邻台布1.4*1.8m*20张(白色)</div>

              <div class="price">
                <span class="color">￥9.9</span>
                <span>月销2.0万</span>
              </div>
              <div class="platform">天猫</div>
            </li>
          </ul>
        </div>
        <div class="tabBox_item">
          <ul class="goodsList_item">
            <li>
              <div class="img">
                <img
                  src="https://imgservice.suning.cn/uimg1/b2c/image/5sq1mNxnnedC6PM8iO2A8g.png_200w_200h_4e"
                  alt=""
                />
              </div>
              <div class="title">免洗红枣新疆特产干货灰枣吊干枣煮粥煲汤...</div>

              <div class="price">
                <span class="color">￥9.9</span>
                <span>月销2.0万</span>
              </div>
              <div class="platform">天猫</div>
            </li>
            <li>
              <div class="img">
                <img
                  src="https://imgservice.suning.cn/uimg1/b2c/image/f5Z5WjPhlOho0e5bbpQNHQ.jpg_200w_200h_4e"
                  alt=""
                />
              </div>
              <div class="title">休闲零食进口金枕头果脯水果干食品满满</div>

              <div class="price">
                <span class="color">￥9.9</span>
                <span>月销2.0万</span>
              </div>
              <div class="platform">天猫</div>
            </li>
            <li>
              <div class="img">
                <img
                  src="https://imgservice.suning.cn/uimg1/b2c/image/l0S0CFTRa-wQjVEYnUmflw.jpg_200w_200h_4e"
                  alt=""
                />
              </div>
              <div class="title">滋源洗发水露乳茶籽水润去屑洗头水膏</div>

              <div class="price">
                <span class="color">￥9.9</span>
                <span>月销2.0万</span>
              </div>
              <div class="platform">天猫</div>
            </li>
            <li>
              <div class="img">
                <img
                  src="https://imgservice.suning.cn/uimg1/b2c/image/t4XmaN4aOnVDx6PEGo6g9Q.jpg_200w_200h_4e"
                  alt=""
                />
              </div>
              <div class="title">百邻台布1.4*1.8m*20张(白色)</div>

              <div class="price">
                <span class="color">￥9.9</span>
                <span>月销2.0万</span>
              </div>
              <div class="platform">天猫</div>
            </li>
          </ul>
        </div>
        <div class="tabBox_item">
          <ul class="goodsList_item">
            <li>
              <div class="img">
                <img
                  src="https://imgservice.suning.cn/uimg1/b2c/image/qbZ0ddsPvyoB6AhE_mSK4g.jpg_400w_400h_4e"
                  alt=""
                />
              </div>
              <div class="title">免洗红枣新疆特产干货灰枣吊干枣煮粥煲汤...</div>

              <div class="price">
                <span class="color">￥9.9</span>
                <span>月销2.0万</span>
              </div>
              <div class="platform">天猫</div>
            </li>
            <li>
              <div class="img">
                <img
                  src="https://imgservice.suning.cn/uimg1/b2c/image/wpsjAgJ6PFUDLGTdvh91dw.jpg_400w_400h_4e"
                  alt=""
                />
              </div>
              <div class="title">休闲零食进口金枕头果脯水果干食品满满</div>

              <div class="price">
                <span class="color">￥9.9</span>
                <span>月销2.0万</span>
              </div>
              <div class="platform">天猫</div>
            </li>
            <li>
              <div class="img">
                <img
                  src="https://imgservice.suning.cn/uimg1/b2c/image/JvAZLSiCgFnBuxoMlHQ9XQ.jpg_400w_400h_4e"
                  alt=""
                />
              </div>
              <div class="title">滋源洗发水露乳茶籽水润去屑洗头水膏</div>

              <div class="price">
                <span class="color">￥9.9</span>
                <span>月销2.0万</span>
              </div>
              <div class="platform">天猫</div>
            </li>
            <li>
              <div class="img">
                <img
                  src="https://imgservice.suning.cn/uimg1/b2c/image/L9E-7tiSTcrfRVNnbEn3Aw.jpg_400w_400h_4e"
                  alt=""
                />
              </div>
              <div class="title">百邻台布1.4*1.8m*20张(白色)</div>

              <div class="price">
                <span class="color">￥9.9</span>
                <span>月销2.0万</span>
              </div>
              <div class="platform">天猫</div>
            </li>
          </ul>
        </div>
        <div class="tabBox_item">
          <ul class="goodsList_item">
            <li>
              <div class="img">
                <img
                  src="https://imgservice.suning.cn/uimg1/b2c/image/a4NDwIDtiAMPNtReidck8w.jpg_400w_400h_4e"
                  alt=""
                />
              </div>
              <div class="title">免洗红枣新疆特产干货灰枣吊干枣煮粥煲汤...</div>

              <div class="price">
                <span class="color">￥9.9</span>
                <span>月销2.0万</span>
              </div>
              <div class="platform">天猫</div>
            </li>
            <li>
              <div class="img">
                <img
                  src="https://imgservice.suning.cn/uimg1/b2c/image/rPPtqfGLK6TEfSfeUKNFeg.jpg_400w_400h_4e"
                  alt=""
                />
              </div>
              <div class="title">休闲零食进口金枕头果脯水果干食品满满</div>

              <div class="price">
                <span class="color">￥9.9</span>
                <span>月销2.0万</span>
              </div>
              <div class="platform">天猫</div>
            </li>
            <li>
              <div class="img">
                <img
                  src="https://imgservice.suning.cn/uimg1/b2c/image/HJ2v_uGK4YUqlKOFjrJjrw.jpg_200w_200h_4e"
                  alt=""
                />
              </div>
              <div class="title">滋源洗发水露乳茶籽水润去屑洗头水膏</div>

              <div class="price">
                <span class="color">￥9.9</span>
                <span>月销2.0万</span>
              </div>
              <div class="platform">天猫</div>
            </li>
            <li>
              <div class="img">
                <img
                  src="https://imgservice.suning.cn/uimg1/b2c/image/wpsjAgJ6PFUDLGTdvh91dw.jpg_200w_200h_4e"
                  alt=""
                />
              </div>
              <div class="title">百邻台布1.4*1.8m*20张(白色)</div>

              <div class="price">
                <span class="color">￥9.9</span>
                <span>月销2.0万</span>
              </div>
              <div class="platform">天猫</div>
            </li>
          </ul>
        </div>
      </div>
    </div>
    <!-- 返回顶部 -->
    <a href="javascript:;" class="returntop">
      <img src="./img/into_top_icon.png" alt="" />
    </a>
    <!-- 底部 -->
    <div class="footer">
      <ul>
        <li>
          <a href="./index.html">
            <img src="./img/f11.png" alt="" />

            <p class="active">首页</p>
          </a>
        </li>
        <li>
          <a href="./minsheng.html">
            <img src="./img/f2.png" alt="" />
            <p>城市民生</p>
          </a>
        </li>
        <li>
          <a href="./fuwu.html">
            <img src="./img/f3.png" alt="" />
            <p>服务号</p>
          </a>
        </li>

        <li>
          <a href="./me.html">
            <img src="./img/f4.png" alt="" />
            <p>我的</p>
          </a>
        </li>
      </ul>
    </div>

    <!-- 轮播图 -->
    <script src="./js/index.json.js"></script>
    <script src="./js/index.js"></script>

    <script src="./js/scrollTop.js"></script>
  </body>
</html>
